<template>
  <div class="image_view">
    <div v-if="src.length > 0 && src[0]" class="image">
      <template v-for="(item, index) in src" :key="item">
        <div class="d_parent">
          <img :src="(item as string)" alt="poster" />
          <div class="delete">
            <svg
              t="1731848701151"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1493"
              @click="deleteImage(index)"
            >
              <path
                d="M584.817778 701.44c-10.524444 0-18.962963-6.068148-18.962963-19.531852L565.854815 414.90963c0-13.463704 8.438519-21.428148 18.962963-21.428148 10.524444 0 18.962963 7.964444 18.962963 21.428148l0 266.998519c0 13.463704-8.438519 20.48-18.962963 20.48L584.817778 701.44z"
                p-id="1494"
              ></path>
              <path
                d="M439.182222 703.336296c-10.524444 0-18.962963-7.964444-18.962963-21.428148L420.219259 414.90963c0-13.463704 8.438519-20.48 18.962963-20.48 10.524444 0 18.962963 7.016296 18.962963 20.48l0 266.998519C458.145185 695.371852 449.706667 703.336296 439.182222 703.336296L439.182222 703.336296z"
                p-id="1495"
              ></path>
              <path
                d="M827.543704 293.546667l-121.362963 0 0-48.545185c0-40.106667-32.426667-72.817778-72.248889-72.817778L390.637037 172.183704c-40.106667 0-72.817778 32.711111-72.817778 72.817778l0 48.545185-121.362963 0c-13.463704 0-24.272593 6.068148-24.272593 19.531852s10.808889 19.531852 24.272593 19.531852l631.087407 0c13.463704 0 24.272593-6.068148 24.272593-19.531852S841.007407 293.546667 827.543704 293.546667L827.543704 293.546667zM356.882963 235.52c0-13.368889 10.903704-24.272593 24.272593-24.272593l262.257778 0c13.274074 0 23.703704 10.619259 23.703704 24.272593l0 58.026667L356.882963 293.546667 356.882963 235.52 356.882963 235.52z"
                p-id="1496"
              ></path>
              <path
                d="M682.002963 842.334815 342.281481 842.334815c-54.044444 0-72.912593-20.29037-72.912593-72.912593l0-354.228148c0-14.317037 6.068148-25.884444 20.385185-24.841481 12.61037 0.948148 18.678519 11.377778 18.678519 24.177778l0 364.468148c0 13.368889 10.903704 24.272593 24.272593 24.272593l358.684444 0c13.463704 0 24.367407-10.903704 24.367407-24.367407L715.757037 415.573333c0-13.368889 6.068148-24.272593 19.531852-24.272593 13.463704 0 19.531852 10.903704 19.531852 24.272593l0 353.943704C754.820741 825.837037 737.28 842.334815 682.002963 842.334815L682.002963 842.334815z"
                p-id="1497"
              ></path>
            </svg>
          </div>
        </div>
      </template>
    </div>
    <div v-if="multiplication || !src[0]" class="add_image">
      <div class="add" @click="addImage">
        <svg
          t="1731849452261"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2488"
        >
          <path
            d="M540.416 540.032h358.4a28.48 28.48 0 0 0 0-56.96h-358.4V123.776a28.416 28.416 0 1 0-56.832 0v359.36h-358.4a28.48 28.48 0 0 0 0 56.96h358.4v359.36a28.416 28.416 0 1 0 56.832 0V540.032z"
            p-id="2489"
          ></path>
        </svg>
        <input
          type="file"
          accept="image/*"
          ref="inputRef"
          hidden
          :multiple="multiplication"
          @change="handleFileChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef, type PropType } from 'vue'

const emit = defineEmits(['deleteImage', 'addImage'])

const inputRef = useTemplateRef<HTMLInputElement>('inputRef')

const props = defineProps({
  src: {
    type: Array,
    default: () => []
  },
  multiplication: {
    type: Boolean as PropType<boolean>,
    required: false,
    default: false
  },
  parentIndex: {
    type: Number as PropType<number>,
    required: false,
    default: 0
  }
})

// 删除image
const deleteImage = (index: number) => {
  emit('deleteImage', index, props.parentIndex)
}

// 添加image
const handleFileChange = (event: Event): void => {
  const input = event.target as HTMLInputElement
  if (input.files?.length) {
    const file = input.files.length === 1 ? input.files[0] : input.files
    // 校验文件类型，确保是图片文件
    if (file) {
      emit('addImage', file, props.parentIndex)
      // 在这里可以进行文件上传的处理
    } else {
      alert('请选择一个有效的图片文件！')
    }
  }
}

const addImage = () => {
  // 点击input
  inputRef.value?.click()
}
</script>

<style scoped lang="less">
.image_view {
  display: flex;
  flex-wrap: wrap;
  .image {
    margin-right: 10px;
    position: relative;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    .d_parent {
      position: relative;
    }
    img {
      width: 150px;
      height: 150px;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 5px;
    }
    .delete {
      position: absolute;
      top: 0;
      right: 18px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      .icon {
        fill: #fff;
        width: 30px;
        height: 30px;
      }
      .icon:hover {
        fill: red;
      }
    }
  }

  .add_image {
    .add {
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #ccc;

      .icon {
        width: 30px;
        height: 30px;
      }

      &:hover {
        border: 1px dashed #5468ff;
      }
    }
  }
}
</style>
